<template>
	<view>
		<nav-box title="新增经历"></nav-box>
		<view class="tab-box">
			<view class="title">选择分类</view>
			<text :class="[current == 1 ? 'active' : '', 'tab-item']" data-key="1" @click="checkVal">培训经历</text>
			<text :class="[current == 2 ? 'active' : '', 'tab-item']" data-key="2" @click="checkVal">承担培训任务</text>
		</view>
		<view class="info-box">
			<view class="title">录入信息</view>
			<u-form :model="info" ref="uForm" label-position="top">
				<u-form-item label="名称" prop="name"><u-input v-model="info.name" placeholder="请输入名称" /></u-form-item>
				<u-form-item label="时间" prop="date">
					<u-input v-model="info.date" disabled placeholder="请输入时间" @click="dateShow = !dateShow" />
					<image src="../../static/images/icon_11.png" mode="" class="icon" @click="dateShow = !dateShow"></image>
					<u-picker mode="time" v-model="dateShow" @confirm="timeChange"></u-picker>
				</u-form-item>
				<u-form-item label="地点" prop="address"><u-input v-model="info.address" placeholder="请输入地点" /></u-form-item>
				<u-form-item label="组织人" prop="person"><u-input v-model="info.person" placeholder="请输入组织人" /></u-form-item>
				<u-form-item label="级别" prop="level"><u-input v-model="info.level" placeholder="请输入级别" /></u-form-item>
				<u-form-item label="内容" prop="content"><u-input v-model="info.content" placeholder="请输入内容" /></u-form-item>
			</u-form>
		</view>
		<view class="btn-box"><u-button shape="circle" hover-class="none" :custom-style="btnStyle" @click="modalShow = !modalShow">提交审核</u-button></view>
		<u-modal
			title=""
			:show-cancel-button="true"
			:show-confirm-button="showBtn"
			:cancel-text="cancelText"
			cancel-color="#2979ff"
			v-model="modalShow"
			@confirm="submitInfo"
			@cancel="cancelModal"
		>
			<view class="wrap">
				<view v-show="modalState"><text>确认进行提交吗</text></view>
				<view v-show="!modalState" class="tips-box">
					<image :src="success ? '../../static/images/icon_success.png' : '../../static/images/icon_error.png'" mode=""></image>
					<text>{{ success ? tips.success.text : tips.fail.text }}</text>
					<text>{{ success ? tips.success.content : tips.fail.content }}</text>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			btnStyle: {
				color: '#ffffff',
				background: '#2D6EFF'
			},
			showBtn: true,
			cancelText: '取消',
			success: true, //是否提交成功
			modalState: true,
			dateShow: false,
			modalShow: false,
			tips: {
				success: {
					text: '提交成功',
					content: '请等待审核'
				},
				fail: {
					text: '提交失败',
					content: '请检查后再次提交'
				}
			},
			content: '1111',
			current: null,
			info: {
				name: '', //名称
				date: '', //时间
				address: '', //地点
				person: '', //组织人
				level: '', //级别
				content: '' //内容
			},
			rules: {
				name: [
					{
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}
				],
				date: [
					{
						required: true,
						message: '请选择时间',
						trigger: ['blur', 'change']
					}
				],
				address: [
					{
						required: true,
						message: '请输入地点',
						trigger: ['blur', 'change']
					}
				],
				person: [
					{
						required: true,
						message: '请输入组织人',
						trigger: ['blur', 'change']
					}
				],
				level: [
					{
						required: true,
						message: '请输入级别',
						trigger: ['blur', 'change']
					}
				],
				content: [
					{
						required: true,
						message: '请输入内容',
						trigger: ['blur', 'change']
					}
				],
			}
		};
	},
	methods: {
		// 选择分类
		checkVal(e) {
			this.current = e.currentTarget.dataset.key;
		},
		// 选择时间
		timeChange(e) {
			let { year, month, day } = e;
			this.info.date = `${year}-${month}-${day}`;
		},
		// 提交审核
		submitInfo() {
			console.log(this.info)
			this.modalShow = true
			this.showBtn = false
			this.modalState = !this.modalState
			this.cancelText = '确认'
			// 走审核接口

			// 审核成功
			this.success = true
			this.info = {
				name: '',
				date: '', 
				address: '', 
				person: '',
				level: '', 
				content: '' ,
				}

			// 审核失败
			// this.success = false
		},
		cancelModal() {
			this.modalShow = false
			this.showBtn = true
		}
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #ffffff;
	.tab-box {
		padding: 40upx 32upx;
		border-bottom: 12upx solid #f6f6f6;
		.title {
			margin-bottom: 46upx;
			color: #2b2b2b;
			font-size: 32upx;
			font-weight: 600;
		}
		.tab-item {
			padding: 14upx 24upx;
			border-radius: 8upx;
			color: #6e6e6e;
			background-color: #f6f6f6;
			&:not(:last-child) {
				margin-right: 24upx;
			}
		}
		.active {
			background-color: #2d6eff;
			color: #ffffff;
		}
	}
	.info-box {
		padding: 48upx 32upx;
		.title {
			font-size: 32upx;
			color: #2b2b2b;
			font-weight: 600;
		}
		.icon {
			width: 48upx;
			height: 48upx;
		}
	}
	.btn-box {
		padding: 40upx 32upx;
	}
	.wrap {
		padding-bottom: 40upx;
		text-align: center;
		image {
			width: 112upx;
			height: 112upx;
			margin-bottom: 20upx;
		}
		.tips-box {
			color: #323232;
			text {
				display: block;
				&:last-child {
					font-size: 28upx;
					color: #6e6e6e;
				}
			}
		}
	}
}
</style>
